<!--
 * @Author: GKN
 * @Date: 2023-10-24 11:53:29
 * @LastEditTime: 2024-05-29 17:26:21
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\user\studyjudge\a2.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div v-loading="loading">
        <el-form :model="form" label-width="0" size="large">
            <el-form-item label="">
                <el-radio-group v-model="form.a">
                    <el-col :span="8" v-for="(item,i) in list" :key="i">
                        <el-radio :label="item.t" >{{ item.name }}</el-radio>
                    </el-col>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-form :model="form" label-width="80" size="large">
            <el-form-item label="*时间">
                <el-col :span="12">
                    <el-date-picker
                        v-model="form.startTm"
                        type="date"
                        placeholder="选择时间"
                        size="large"
                        style="width:100%;"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                    />
                </el-col>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="*电话">
                        <el-col :span="24">
                            <el-input placeholder="电话" v-model="form.phone"/>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="*邮箱">
                        <el-col :span="24">
                            <el-input placeholder="邮箱" v-model="form.email"/>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="cursor-p btn-submit-1" @click="submit" >选好了，提交我的定制需求</div>
        <div class="flex flex-j-c" style="margin-top: 100px;color: #d00b00;">
            <p @click="tip">最受欢迎创新成果排行榜》</p>
            <p @click="tip" style="margin-left: 200px;">创新成果主题热度排行榜》</p>
        </div>
    </div>
    <el-dialog v-model="isshow" title="" width="30%" style="border-radius:15px;background: linear-gradient(to bottom, rgba(255, 250, 248, 1), rgba(255, 225, 205, 1));">
        <div class="tipview">
            <p>加入超级VIP</p>
            <p>享受此项服务的提示</p>
        </div>
        <div class="cursor-p" @click="submit" style="width: 236px;height: 54px;color:#fff;background:#d00b00;border-radius:30px;line-height:54px;font-size:24px;margin:50px auto;">立即加入</div>
    </el-dialog>
    <el-row :gutter="20" style="margin-top: 100px;">
        <el-col :span="12">
            <div class="back-sha-box" style="padding:20px;min-height:300px;">
                <TitleView title="最受欢迎创新成果排行榜" />
                <div style="margin-top:20px;">
                    <div v-for="(item,i) in list1" :key="i" class="phview">
                        <sortTip :number="i+1" />
                        <div class="omit-2">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="back-sha-box" style="padding:20px;min-height:300px;">
                <TitleView title="创新成果主题热度排行榜" />
                <div style="margin-top:20px;">
                    <div v-for="(item,i) in list1" :key="i" class="phview">
                        <sortTip :number="i+1" />
                        <div class="omit-2">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-dialog v-model="is_pay" title="" width="600px" style="border-radius:15px;padding-bottom:10px;">
        <div style="font-size:24px;font-weight:bold;color:#333;">选择你要生成的报告方式</div>
        <div style="width: 100%;margin-top:75px;">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div style="font-size:17px;color:#333;text-align:left;">在线生成报告</div>
                    <div class="payType cursor-p" style="margin-top:20px;">
                        <div v-for="(item,i) in list_payType" :key="i" :class="item.select?'active item ':'item'" @click="click_payType(i)">
                            <img v-if="i==0" class="ad-img" src="~@/assets/img/user/p1.png" alt="">
                            <img v-if="i==1" class="ad-img" src="~@/assets/img/user/p2.png" alt="">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div style="font-size:16px;color:#333;text-align:left;margin-top:28px;">
                        <span>应付金额￥ </span>
                        <span style="color:#d00b00;font-size:18px;font-weight:bold;">99</span>
                    </div>
                    <div style="margin-top:15px;font-size:13px;color:#8d8d8d;text-align:left;">
                        扫码付费，生成即时报告
                    </div>
                    <div class="btn-submit" @click="payclick" style="margin:50px auto;">立即支付</div>
                </el-col>
            </el-row>
            
        </div>
    </el-dialog>
</template>

<script setup>
import { ref,reactive } from "vue";
import { ElMessage } from 'element-plus'
import TitleView from '../../components/title.vue';
import sortTip from '../../components/sort/i1.vue';
    const list = ref([
        {name:'管理',t:'1'},{name:'科技',t:'2'},{name:'财务',t:'3'},{name:'党建',t:'4'},{name:'品牌',t:'5'},{name:'思政',t:'6'}
    ])
    const form = ref({
        a:'1'
    })
    const loading = ref(false)
    const is_pay = ref(false)
    const index_payType = ref(0)
    const list_payType = ref([
        {name:'支付宝支付',select:true},{name:'微信支付',select:false}
    ])
    const click_payType = (i)=>{
        list_payType.value.map((item)=>{
            item.select = false
        })
        list_payType.value[i].select = true
        index_payType.value = i
    }
    const pay = ()=>{
        is_pay.value = true
    }
    const submit = ()=>{
        pay()
    }
    const isshow = ref(false)
    const tip = ()=>{
        isshow.value = true
    }
    const list1 = ref([])
</script>

<style lang='less' scoped>
/deep/ .el-input--large .el-input__wrapper{
    padding: 0 0px;
    background:#f6f7f9;
}
/deep/ .el-textarea__inner{
    background:#f6f7f9;
}
.tipview{
    font-size: 24px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: bold;
    color: #333;
    line-height: 38px;
}
::v-deep {

.el-input__inner {
  border: 0;
  border-radius: 0px;

  // &:focus {
  //   border-bottom: 1px solid #409eff;
  // }
}

.el-textarea__inner {
  resize: none;
  /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  border: 0;
  border-radius: 0px;

  // &:focus {
  //   border-bottom: 1px solid #409eff;
  // }
}
}
.phview{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    div{
        margin-left: 10px;
    }
}
.payType{
    display: flex;
    .item{
        width: 148px;
        height: 56px;
        border:1px solid #e8e8e8;
        display: flex;
        align-items: center;
        margin-right: 15px;
        border-radius: 6px;
        padding: 0 5px;
        img{
            width: 28px;
            height: 20px;
        }
        span{
            color: #8d8d8d;
            font-size: 18px;
            margin-left: 12px;
        }
    }
    .active{
        border:1px solid #fcbdbd;
    }
}
</style>
  
  


